<template>
    <div id="registerNow">
        <!-- 弹窗块 -->
        <uniPopup :show="consult" position="bottom" class="modules coupon_mask" ref="vPopup">
            <a class="closemask" @click="closemask()">
                <img :src="constant.imgUrl +'design/addfriclose.png'" alt />
            </a>

            <slot>
                <div class="mask_title">现在报名，还有机会现场砸金蛋</div>
            </slot>
            <div class="mask_body">
                <div class="mask_input">
                    <input type="text" v-model="mobile" @blur="resetInput" placeholder="请输入手机号码" />
                    <input type="text" v-model="name" @blur="resetInput" placeholder="请问我们该如何称呼您" />
                    <!-- <van-field v-model="mobile" placeholder="请输入手机号领取限时专享优惠券"/> -->
                </div>
                <div class="send_coupon_btn" @click="signBtn">立即报名</div>
            </div>
        </uniPopup>
    </div>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import { addCart } from '@/api/cart'
import { verifiPhone } from '@/utils/common'
export default {
	name: 'coupon',
	components: {
		uniPopup
	},
	data() {
		return {
			constant: this.$constant,
			consult: false,
			mobile: '',
			name: ''
		}
	},
	props: {
		source: {
			type: String,
			default: '活动报名'
		}
	},
	mounted() {},
	methods: {
		showMask() {
			// this.consult = true
			this.$refs.vPopup.open()
		},
		closemask() {
			// 关闭弹框
			// this.consult = false
			this.$refs.vPopup.clse()
		},
		// clickInput() {
		//     setTimeout(function() {
		//         document.body.scrollTop = document.body.scrollHeight
		//     }, 300)
		// },
		resetInput() {
			// $('html,body').animate({ scrollTop: $('.wrap_common').offset().top }, 100)
		},
		signBtn() {
			if (this.mobile == '') {
				uni.showToast('请输入手机号码！')
				return false
			}
			if (!verifiPhone(this.mobile)) {
				uni.showToast('请输入正确的手机号码！')
				return false
			}
			if (this.name == '') {
				uni.showToast('请输入名字！')
				return false
			}

			let params = {
				mobile_phone: this.mobile,
				name: this.name,
				prebook_source: this.source,
				owner_user_id: this.$route.query.owner_user_id
			}
			if (this.$route.query.share_user_id) {
				params.share_user_id = this.$route.query.share_user_id
			}
			if (this.$route.query.p_share_user_id) {
				params.p_share_user_id = this.$route.query.p_share_user_id
			}

			addCart(params).then(res => {
				if (res.status === 'success') {
					this.$toast('报名成功!')
					this.mobile = ''
					this.closemask()
				} else {
					uni.showToast(res.errors.message)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
/*@import '~@/assets/css/base.scss';*/
#registerNow {
    .modules {
        // height: 730px;
        // overflow: hidden;
        border-radius: 26px 26px 0 0;
    }
    //   弹窗
    .coupon_mask {
        .mask_body {
            padding: 0 40px;
        }
        .mask_title {
            height: 100px;
            line-height: 100px;
            font-size: 36px;
            text-align: center;
        }
        .mask_input {
            input {
                width: calc(100% - 30px);
                height: 90px;
                border-radius: 50px;
                padding-left: 30px;
                outline: none;
                -webkit-appearance: none;
                background-color: #f5f5f5;
                border: 2px solid #ddd;
                font-size: 28px;
                color: #333;
                margin-top: 20px;
            }
        }
        .send_coupon_btn {
            text-align: center;
            padding: 16px 0;
            color: #fff;
            font-size: 40px;
            border-radius: 50px;
            background: linear-gradient(#ff5b95, #ff3249);
            margin: 20px 0 30px;
        }
    }
}
</style>
